<template>
    <div class="search">
        <el-form label-position="right" label-width="72px" :model="param" inline>
            <el-form-item label="购卡类型" >
                <el-select v-model="param.cardType" placeholder="请选择" clearable >
                    <el-option
                            v-for="item in cardTypes"
                            :key="item.cardType"
                            :label="item.name"
                            :value="item.cardType"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="member-num">
            会员总数：{{totalNum}}。<span class="surplus-count">剩余会员数：{{surplus}}</span>
        </div>
    </div>
</template>

<script lang="ts">
    import {ref, reactive, watch} from 'vue'

    export default {
        props: {
            totalNum: Number,
            surplus: Number,
            cardTypes: Array,
        },
        setup(props, {emit}) {
            let param = reactive({
                cardType: '',
            });
            watch(param, (val) => emit('search', {...param}))
            return {param}
        }
    }
</script>

<style lang="scss" scoped>
    .search {
        background: #fff;
        border-radius: 6px;
        margin-bottom: 22px;
        padding: 22px 30px 0 22px;
        min-height: 0;
        display: flex;
        justify-content: space-between;
    }

    .member-num {
        margin-top: 10px;
        font-weight: 500;

        .surplus-count {
            color: red;
        }
    }
</style>
